<template>
  <el-container>
    <el-button type="primary" @click="getOrder">接单</el-button>
  </el-container>
  <!-- 已接取的订单  -->
  <el-container>
  <el-table :data="orderListWithWorker" empty-text="暂无未完成订单"> <!--@TODO 待接取订单分页-->
    <el-table-column prop="id" label="订单编号">
    </el-table-column>
    <el-table-column prop="custId" label="顾客">
      <template #default="scope">
        <span v-if="customerNames[scope.row.custId]">{{ customerNames[scope.row.custId] }}</span>
        <span v-else>加载中...</span>
      </template>
    </el-table-column>
    <el-table-column prop="custAddress" label="顾客地址">
      <template #default="scope">
        <span v-if="customerAddresses[scope.row.custId]">{{ customerAddresses[scope.row.custId] }}</span>
        <span v-else>加载中...</span>
      </template>
    </el-table-column>
    <el-table-column prop="sendWaterCount" label="送水数量">
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="ensureOrder(scope.row.id)" v-if="scope.row.sendWaterTime == null">确认送达</el-button>
        <el-button type="danger" v-else disabled>已送达</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-container>

  <el-container>
    <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[5,10,20,30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
  </el-container>

  <!-- 可接取的订单  -->
  <el-dialog title="可接订单" v-model="visible" width="50%">
    <el-table :data="orderListWithoutWorker" empty-text="暂无可接订单">
      <el-table-column prop="id" label="订单编号">
      </el-table-column>
      <el-table-column prop="custId" label="顾客">
        <template #default="scope">
          <span v-if="customerNames[scope.row.custId]">{{ customerNames[scope.row.custId] }}</span>
          <span v-else>加载中...</span>
        </template>
      </el-table-column>
      <el-table-column prop="custAddress" label="顾客地址">
        <template #default="scope">
          <span v-if="customerAddresses[scope.row.custId]">{{ customerAddresses[scope.row.custId] }}</span>
          <span v-else>加载中...</span>
        </template>
      </el-table-column>
      <el-table-column prop="sendWaterCount" label="送水数量">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="danger" @click="acceptOrder(scope.row.id)">接单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false; this.doWorkerOrder()">关 闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {mapState} from "vuex";
export default {
  name: "WorkerOrder",
  computed: {
    ...mapState(["user"])
  },
  data() {
    return {
      orderListWithoutWorker: [], // 可接取订单
      orderListWithWorker: [], // 已接取订单
      visible: false,
      customerNames: {},
      customerAddresses: {},
      pageSize: 10,
      pageNum: 1,
    }
  },
  methods: {
    doWorkerOrder() { // 获取接取订单
      console.log(this.user.id);
      this.$axios.post("http://localhost:8091/worker/getOrderListWithWorker", {
        "pageSize": this.pageSize,
        "pageNum": this.pageNum,
        "params": {
          "name": this.user.userName,
        }
      }).then(res => {
        console.log("获取接取订单成功")
        console.log(this.pageSize)
        console.log(this.pageNum)
        console.log(this.user.name)
        console.log(res);
        if (res.data.code === 200) {
            this.orderListWithWorker = res.data.data.records;
            this.fetchCustomerNames2(); // 获取所有顾客的名字
            this.fetchCustomerAddresses2(); // 获取所有顾客的地址
        } else {
          this.$message.error("获取订单失败");
        }
      })
    },
    getOrder() {
      this.getAllOrder();
      this.visible = true;
    },
    getAllOrder() {
      this.$axios.post("http://localhost:8091/worker/getOrderListWithoutWorker", {
        "pageNum": 1,
        "pageSize": 10,
      }).then(res => {
        console.log("获取订单成功")
        console.log(res);
        if (res.data.code === 200) {
          this.orderListWithoutWorker = res.data.data.records;
          this.fetchCustomerNames(); // 获取所有顾客的名字
          this.fetchCustomerAddresses(); // 获取所有顾客的地址
        } else {
          this.$message.error("获取订单失败");
        }
      })
    },
    fetchCustomerNames() {
      const custIds = this.orderListWithoutWorker.map(order => order.custId);
      custIds.forEach(id => {
        this.getCustomerName(id);
      });
    },
    fetchCustomerNames2() {
      const custIds = this.orderListWithWorker.map(order => order.custId);
      custIds.forEach(id => {
        this.getCustomerName(id);
      });
    },
    getCustomerName(id) {
       this.$axios.post("http://localhost:8091/customer/getNameById?id=" + id)
           .then(res => {
             if (res.data.code === 200) {
               this.customerNames[id] = res.data.data;
             } else {
               this.customerNames[id] = "无";
             }
           })
    },
    fetchCustomerAddresses() {
      const custIds = this.orderListWithoutWorker.map(order => order.custId);
      custIds.forEach(id => {
        this.getCustomerAddress(id);
      });
    },
    fetchCustomerAddresses2() {
      const custIds = this.orderListWithWorker.map(order => order.custId);
      custIds.forEach(id => {
        this.getCustomerAddress(id);
      });
    },
    getCustomerAddress(id) {
      if (!this.customerAddresses[id]) {
        this.$axios.post("http://localhost:8091/customer/getAddressById?id=" + id)
            .then(res => {
              console.log("获取顾客地址成功")
              console.log(res)
              if (res.data.code === 200) {
                this.customerAddresses[id] = res.data.data;
              } else {
                this.customerAddresses[id] = "无";
              }
            });
      }
    },
    acceptOrder(id) {
       this.$axios.put(`http://localhost:8091/worker/acceptOrder?id=${id}&workerName=${this.user.userName}`)
           .then(res => {
             if (res.data.code === 200) {
               this.$message.success("接单成功");
               this.getAllOrder();
             } else {
               this.$message.error("接单失败");
             }
           })
    },
    ensureOrder(id) {
      this.$axios.put(`http://localhost:8091/worker/ensureOrder?id=${id}`)
        .then(res => {
          if (res.data.code === 200) {
            this.$message.success("确认成功");
            this.doWorkerOrder();
          } else {
            this.$message.error("确认失败");
          }
        })
    }
  },
  created() {
    this.doWorkerOrder();
  }
}
</script>



<style scoped lang="less">

</style>